<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <div class="col-md-8 col-xs-12">
            <%@include file="/WEB-INF/common/back/breadcrumb.jsp" %>
        </div>
        <div class="col-md-4 text-right">
            <c:if test="${fn:contains(qClassActions,'add')}">
                <a class="btn btn-primary btn-sm no-border" href="${contextPath}/auto/add?o=Auto">
                    <i class="ace-icon fa fa-plus"></i>添加
                </a>
            </c:if>
            <c:if test="${fn:contains(qClassActions,'export')}">
                <a class="btn btn-primary btn-sm no-border" href="${contextPath}/auto/export">
                    <i class="ace-icon fa fa-plus"></i>导出
                </a>
            </c:if>
        </div>
    </div>

    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <form class="form-inline" id="searchForm" action="${contextPath}/auto/home" method="post">
                    <input name="pageIndex" type="hidden">
                    <%@include file="/WEB-INF/common/back/fragment/query-fragement.jsp" %>

                    <div class="space-4"></div>
                    <div class="row center">
                        <button type="button" id="queryBtn" class="btn btn-purple btn-sm no-border">
                            <i class="ace-icon fa fa-search fa-on-right"></i>查询
                        </button>
                        <button type="reset" class="btn btn-info btn-sm no-border">
                            <i class="ace-icon fa fa fa-lightbulb-o fa-on-right"></i>清空
                        </button>
                    </div>
                    <div class="space-4"></div>
                </form>
            </div>
            <div class="col-xs-12">
                <div id="jqxgrid"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var source = {
            datatype: 'json',
            datafields: [
                {name: 'id', type: 'string'},
                <c:forEach items="${fieldMap['show']}" var="field" varStatus="st">
                {name: '${field.name}', type: 'string'},
                </c:forEach>
                {name: '操作', type: 'string'}
            ],
            id: 'id',
            url: '${pageContext.request.contextPath}/auto/list?o=Auto',
            type: 'POST',
            async: true,
            filter: function () {
                $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
            },
            beforeprocessing: function (data) {
                if (data != null) {
                    source.totalrecords = data.totalElements;
                }
            }
        };

        var jqxgrid = $('#jqxgrid');
        var dataAdapter = new $.jqx.dataAdapter(source);
        jqxgrid.jqxGrid({
            theme: 'bootstrap',
            width: '100%',
            autoheight: true,
            source: dataAdapter,
            pageable: true,
            filterable: false,
            enablebrowserselection: true,
            pagesize: 10,
            pagesizeoptions: ['10', '15', '30'],
            virtualmode: true,
            rendergridrows: function (obj) {
                return obj.data;
            },
            columns: [
                <c:forEach items="${fieldMap['show']}" var="field" varStatus="st">
                {text: '${field.nickname}', datafield: '${field.name}'},
                </c:forEach>
                {
                    text: '操作', datafield: '操作', columntype: 'string',
                    cellsrenderer: function (row, column, value) {
                        var data = jqxgrid.jqxGrid('getrowdata', row);
                        if (data == undefined) {
                            return "";
                        }
                        console.log(data);
                        var btn = "";
                        btn += "<a class='btn btn-xs btn-success' href='${contextPath}/auto/view?o=Auto&id=" + data.id + "'>查看</a> ";
                        <c:if test="${fn:contains(qClassActions,'edit')}">
                        btn += "<a class='btn btn-xs btn-info' href='${contextPath}/auto/edit?o=Auto&id=" + data.id + "'>编辑</a> ";
                        </c:if>
                        <c:if test="${fn:contains(qClassActions,'del')}">
                        btn += "<a class='btn btn-xs btn-danger' href='${contextPath}/auto/del?'>删除</a>";
                        </c:if>
                        return btn;
                    }
                }
            ]
        });

        jqxgrid.on('bindingcomplete', function (event) {
            $("#jqxgrid").jqxGrid('localizestrings', localizationobj);
        });

        $("#queryBtn").click(function () {
            console.log($("#searchForm").serializeObject());
            source.data = {params: JSON.stringify($("#searchForm").serializeObject())};
            dataAdapter.dataBind();
        });
    });
</script>